<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Drop Action</title>
    <link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
    <link rel=stylesheet href=libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css>
    <link rel=stylesheet href=src/css/graph.editor.css>
</head>
<body class="layout">
<div id="editor" data-options="region:'center'"></div>
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script>
<!-- build:js libs/js.js -->
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<script src="libs/layout.border.js"></script>

<!-- build:js libs/graph.editor/graph.editor.js -->
<script src="src/common/i18n.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js"></script>
<script src="src/common/PopupMenu.js"></script>
<script src="src/common/PropertyPane.js"></script>
<script src="src/graph.editor.js"></script>
<!-- endbuild -->
<script>
    Q.Element.prototype.showTooltip = function(show){
        var tooltip = this.tooltip || this.name;
        if(!show || !tooltip){
            if(this.tooltipLabel){
                this.tooltipLabel.visible = false;
                this.invalidate();
            }
            return;
        }
        if(!this.tooltipLabel){
            var label2 = new Q.LabelUI();
            label2.position = Q.Position.CENTER_TOP;
            label2.anchorPosition = Q.Position.CENTER_BOTTOM;
            label2.border = 1;
            label2.padding = new Q.Insets(2, 5);
            label2.showPointer = true;
            label2.rotatable = false;
            label2.offsetY = -10;
            label2.backgroundColor = "#EEE";
            label2.fontSize = 16;
            label2.fontStyle = "italic 100";

            this.tooltipLabel = label2;
            this.addUI(label2);
        }
        this.tooltipLabel.data = tooltip;
        this.tooltipLabel.visible = true;
        this.tooltipLabel.invalidateData();
        this.invalidate();
    }

    $('#editor').graphEditor({callback: function(editor){
        var graph = editor.graph;

        var hello = graph.createNode("Hello", -100, -50);
        hello.image = Q.Graphs.server;
        var qunee = graph.createNode("Qunee", 100, 50);
        var edge = graph.createEdge("Hello\nQunee", hello, qunee);
        graph.moveToCenter();

        var currentElement = null;
        //也可以用onclick, onclick会有100-200ms的延迟
        graph.onmousemove = function(evt){
            var data = evt.getData();
            if(data == currentElement){
                return;
            }
            if(currentElement){
                currentElement.showTooltip(false);
            }
            currentElement = data;
            if(currentElement){
                currentElement.showTooltip(true);
            }
        }
    }});
</script>
</body>
</html>